<template>
	<view>
		<up-navbar leftIconColor="#FFFFFF" leftIconSize="44rpx" :title="title" :autoBack="true" placeholder
			bgColor="transparent">
		</up-navbar>
		<view class="login">
			<view class="name">手机号</view>
			<view class="input flex align-item_center justify-content_center">
				<up-input placeholder="请输入手机号" type='number' border="none" v-model="data.mobile"></up-input>
			</view>
			<view class="name">密码</view>
			<view class="input flex align-item_center justify-content_center">
				<up-input placeholder="请输入密码" border="none" v-model="data.password"></up-input>
			</view>
		</view>
		<view class="v-button" style="bottom: 250rpx;" @click="confirm">登录</view>
		<view class="v-button" style="bottom: 110rpx;" @click="login">注册</view>
	</view>
</template>

<script setup>
	import upload from "@/utils/upload.js"
	import userApi from "@/api/member/user.js"
	import {
		msg,
		back
	} from "@/utils/tool.js"
	import authApi from "@/api/member/auth.js"
	import {
		reactive,
		ref
	} from "vue"

	const data = reactive({
		mobile: undefined,
		password: ""
	})

	function confirm() {
		if (!data.mobile) return msg("请输入手机号")
		if (!data.password) return msg("请输入密码")

		authApi.login(data).then((res) => {
			loginLogic(res)
		})
	}

	function loginLogic(res) {
		uni.setStorageSync('accessToken', res.data.accessToken)
		uni.setStorageSync('refreshToken', res.data.refreshToken)
		msg("登录成功")
		back()

		userApi.get().then(res => {
			uni.setStorageSync("userInfo", res.data)
		})
	}

	function login() {
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}

	const title = ref("登录")
</script>
<style>
	page {
		background-color: #1B1829;
	}
</style>
<style scoped lang="scss">
	.login {
		padding: 20rpx 30rpx;

		.input {
			box-sizing: border-box;
			margin: 30rpx auto 0;
			width: 690rpx;
			height: 88rpx;
			background: #F5F5F5;
			border-radius: 16rpx;
			padding: 0rpx 30rpx;
		}

		.name {
			font-weight: 500;
			font-size: 36rpx;
			color: #fff;
			padding-top: 30rpx;
		}
	}
</style>